<template>
    <div class="count">
        <h1>求和为：{{ countStore.sum }}</h1>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">加</button>
        <button @click="minus">减</button>
    </div>
</template>
<script setup lang="ts" name="Count">
    import { ref } from 'vue'
    import { useCountStore } from '@/store/Count'
    let countStore = useCountStore()
    let n = ref(1)
    function add() {
        //这里countStore是一个reactive对象，sum在countStore中是一个ref对象，所以可以直接访问，不用value
        countStore.sum += n.value
    }
    function minus() {
        countStore.sum -= n.value
    }
</script>

<style scoped>
    .count {
        background-color: pink;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px;
    }
    select,button {
        margin: 0 5px;
        height: 30px;
    }
</style>
